<div class="customers-line">
  <section class="customers-say">
    <div class="page-width">
        <div class="title-wrapper-with-link title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
            <h2 class="title">
              {{ section.settings.title | escape }}
            </h2>
          </div>
      <div class="swiper-father">
        <div class="customers-swiper-container customers-container swiper-container">
          <div class="customers-card swiper-wrapper">
              {%- for block in section.blocks -%}
                <div class="customers-list swiper-slide" {{ block.shopify_attributes }} data-swiper-parallax="-300">
                 
                  {%- if block.settings.image != blank -%}
                  <div class="customers-card__image-wrapper">
                    <div class="customers-card__image deferred-media__poster media">
                      <img
                      srcset="
                        {%- if block.settings.image.width >= 240 -%}{{ block.settings.image | img_url: '240x' }} 240w,{%- endif -%}
                        {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                        {%- if block.settings.image.width >= 480 -%}{{ block.settings.image | img_url: '480x' }} 480w,{%- endif -%}
                        {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
                        {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                      data-src="{{ block.settings.image | img_url: '550x' }}"
                      alt="{{ block.settings.image.alt }}"
                      height="{{ block.settings.image.height }}"
                      width="{{ block.settings.image.width }}"
                      class="lazyload"
                      loading="lazy"
                    >

                    </div>
                  </div>
                 {%- endif -%}
  
                  <div class="customers-card__info customers-hover">
                     <div class="customers_wrapper">
                      <div class="customers_info" data-swiper-parallax="-600">
                          {%- if block.settings.name != blank -%}
                          <div class="name">{{ block.settings.name }}</div>
                         {%- endif -%}
                         {%- if block.settings.time != blank -%}
                         <div class="time">{{ block.settings.time }}</div>
                       {%- endif -%}
                      </div>
                      {%- if block.settings.text != blank -%}
                      <div class="rte">{{ block.settings.text }}</div>
                     {%- endif -%}
                     </div>
                  </div>
                </div>
             {%- endfor -%}
          </div>
         </div>
          <!-- Add Pagination -->
          <!-- <div class="swiper-pagination customers-line"></div>    -->
          <div class="swiper-button-next customers-line">{% render 'swiper-prev-madal' %}</div>
      </div>
    </div>
</section>
</div>



<script>
    var swiper = new Swiper('.customers-container', {
      speed: 600,
      slidesPerView:1,
      spaceBetween:0,
      simulateTouch : false,
      observer:true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents:true,//修改swiper的父元素时，自动初始化swiper
      pagination: {
        el: '.swiper-pagination.customers-line',
      },
      navigation: {
      nextEl: ".swiper-button-next.customers-line",
      prevEl: ".swiper-button-prev.customers-line",
    },
      breakpoints: {
        320: {
          slidesPerView:1,
          spaceBetween: 26,
          loop:true,
        },
        375: {
          slidesPerView: 1.5,
          spaceBetween: 26,
          loop:true,
        },
        640: {
          slidesPerView:1.5,
          spaceBetween: 26,
          loop:true,
        },
        750: {
          slidesPerView: 2,
          spaceBetween:36,
          loop:true,
        },
        768: {
          slidesPerView: 2,
          spaceBetween:36,
          loop:true,
        },
         990: {
          slidesPerView: 3,
          spaceBetween:36,
          loop:true,
        },
        991: {
          slidesPerView: 5,
          spaceBetween:2,
        },
        1440: {
          slidesPerView: 5,
          spaceBetween:0,
        },
      }
    });
  </script>

{% schema %}
{
  "name": "Customers All",
  "class": "spaced-section spaced-section--full-width cus-say",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Customers say",
      "label": "Headding"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        },
        {
          "type": "url",
          "id": "cus_link",
          "label": "Button link"
        },
        {
            "type": "text",
            "id": "name",
            "default": "name",
            "label": "Name"
        },
        {
            "type": "text",
            "id": "time",
            "default": "time",
            "label": "Time"
        },
        {
            "type": "richtext",
            "id": "text",
            "default": "<p>Customers say</p>",
            "label": "Customers say"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Customers All",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}
